<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>

<style>
    /* 确保整个页面充满视口 */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* Layui 布局 */
    .layui-main{
        height: 80vh;
    }

    /* 头部固定在顶部 */
    .layui-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 1000;
    }

    /* 底部固定在底部 */
    .layui-footer {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #f8f8f8;
    }

    /* 内容区域 */
    .layui-body {
        margin-top: 50px; /* 头部高度 */
        margin-bottom: 50px; /* 底部高度 */
        padding: 20px; /* 内容区域的内边距 */
    }
    iframe {
        border: none; /* 移除所有边框 */
    }
</style>


<body>
<div class="app">
    <!-- 头部区域 -->
    <div class="layui-header layui-bg-gray">
        <!-- 如果需要导航菜单，可以在这里添加 -->
    <ul class="layui-nav layui-layout-left layui-bg-gray">
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/toLogin">登录</a></li>
        <li class="layui-nav-item"><a target="myIframe" href="test.jsp" >跳转页面</a></li>
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/book/1">测试mysql查询</a></li>
    </ul>
    </div>
    <!-- 内容区域 -->
    <div class="layui-body">
        <div class="layui-main">
            <!-- iFrame -->
            <iframe name="myIframe" id="myIframe" src="body.jsp" width="100%" height="400" frameborder='none' scrolling="no"></iframe>
        </div>
    </div>

    <!-- 底部区域 -->
    <div class="layui-footer">
        <p>&copy; 2024 版权所有</p>
    </div>
</div>

</body>

<script type="text/javascript">
    layui.use(['element'], function () {
        // 初始化元素
        layui.element.init();
    });
</script>
</html>